<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

  <div th:replace="header :: commonheader"></div>
</head>
<body>
<div th:replace="header :: commonnav"></div>
<style>
  .el-tabs--bottom .el-tabs__item.is-bottom:last-child, .el-tabs--bottom .el-tabs__item.is-top:last-child, .el-tabs--top .el-tabs__item.is-bottom:last-child, .el-tabs--top .el-tabs__item.is-top:last-child {
     padding-right: 14px;
  }
  .el-tabs__item.is-active {
    color: #245aa0;
    font-weight: bold;
    font-size: 20px;
    margin: 0;
    border-bottom: 2px solid #245aa0;
    /*padding: 0 10px;*/
  }
  .el-tabs__item{
    font-size: 18px;
  }

  .el-tabs__active-bar {
    background-color: #245aa0;
  }
  .el-tabs__item:hover {
    color: #245aa0;
    cursor: pointer;
  }
  .el-tabs__nav{
    float: right;
  }
  .content-sub{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-indent: 28px;
  }
</style>
<div id="newDom" class="main-page-box" v-cloak>

  <div id="bannerModule">
    <div class="homeSlide">
      <ul class="slides">


        <li><img src="https://file.xatianzhou.com/images/pagebanner/1634108246774421.jpg"></li>


      </ul>
    </div>
    <div class="bm_tc"></div>
  </div>

<!--  <div class="yunu-sou" style="display: block">-->
<!--    <div class="container clearfix">-->
<!--      <div class="hot"> <strong>本页关键词：</strong>-->

<!--        陕西西安矿石化验,选矿实验,矿山设计,矿山承包,选矿厂承包,岩矿鉴定,矿权交易-->

<!--      </div>-->
<!--    </div>-->
<!--  </div>-->

  <div class="aboutcontain3">
    <div class="abouttop">

      <div class="abouttopnall">
        <div class="abouttopnwai">
          <div class="abouttopn">天宙新闻</div>
        </div>
        <div class="mianbao">
          <a href="/">首页</a> &gt;&gt; <a href="/new/">天宙新闻</a>
        </div>
      </div>
      <div class="NewsList-A9">
        <div class="el-tabs el-tabs--top" id="tab-box">
          <div class="el-tabs__header is-top">
            <div class="el-tabs__nav-wrap is-top">
              <div class="el-tabs__nav-scroll">
                <div role="tablist" class="el-tabs__nav is-top" style="transform: translateX(0px);">
                  <a th:each="column,columnId:${columns}" th:href="${'/new?columnid='+column.id}">
                    <div class="el-tabs__item is-top" th:classappend="${column.id == paramid} ? 'is-active' : ''" th:text="${column.name}"></div>
                  </a>

                </div>
              </div>
            </div>
          </div>
        </div>
        <div th:if="${newList != null and newList.data != null}">
          <li th:each="ar,arId:${newList.data}">
            <div class="images_arr">
              <a th:href="${'/new/'+ar.id+'.html'}">
                <img th:src="${ar.thumb+'?x-oss-process=image/resize,m_fill,h_200,w_200'}" style="width:220px;height: 160px;">
              </a>

              <div class="zuoshang tui" th:if="${ar.istui == 2}">推荐</div>


              <div class="zuoshang zhiding" th:if="${ar.istop == 2}">置顶</div>

            </div>

            <h3 class="_t el"> <a th:href="${'/new/'+ar.id+'.html'}" th:title="${ar.title}" th:text="${ar.title}" target="_blank"></a> </h3>
            <p style="color:#999;margin: 20px 8px 0 0;line-height: 22px;font-size: 14px;text-indent:28px">
              <span class="content-sub" th:text="${ar.content}"></span>
              <a th:href="${'/new/'+ar.id+'.html'}" target="_blank" class="a_f60">[详细]</a>
            </p>
            <time th:text="${ar.formattedDate}"></time>
          </li>
        </div>


        </ul>

      </div>

      <div class="right" style="width:328px; float:right;margin: 0 auto;margin-top:30px;text-align: center;">
        <img src="https://file.xatianzhou.com/images/xinwen.jpg" alt="天宙矿业介绍">
        <div style="margin-top: 20px;padding:0 20px;line-height: 28px;font-size: 16px;text-indent:28px;text-align:left;">
          公司是从事矿业科技研究和技术服务的民营企业，拥有一批技术精湛的专业科技人员，聘有众多国内优秀的矿业专家，以“科学开矿，利国利民”为宗旨，致力于打造实用的先进技术服务平台，支持矿山企业提高效益，在和谐奋进中与矿山企业同步成长壮大。公司总部坐落在西安标志性建筑——都市之门，位于高新区唐延路与丈八路十字东北角，占据得天独厚的地理位置。
        </div>

      </div>

    </div>
  </div>


  <div style="width: 50%;margin: 0 auto;">

    <el-pagination
        style="text-align: center;"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</div>
<script th:inline="javascript">
  /* 使用Thymeleaf表达式获取paramid的值并存储为变量 */
  var columnid = [[${paramid}]];
  var currentPage = [[${currentPage}]];
  var total = [[${newList.total}]];
</script>

<script>

  new Vue({
    el: '#newDom',
    data: {
      columnid:columnid,
      pageSize:10,
      currentPage:currentPage,
      total:total,
    },
    methods: {
      handleCurrentChange(e){
        // 获取当前域名和URL
        var newUrl = "/new?columnid="+this.columnid+"&page="+e


// 刷新页面
        window.location.replace(newUrl);
      }
    },
    created(){

    },
    delimiters: ['{%', '%}'],
  })

</script>
<div th:replace="footer :: commonfooter"></div>
</body>
</html>